<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="8">
        <el-card shadow="never" header="脉冲圆点">
          <el-space wrap :size="15">
            <sc-status-indicator pulse type="primary"></sc-status-indicator>
            <sc-status-indicator pulse type="success"></sc-status-indicator>
            <sc-status-indicator pulse type="warning"></sc-status-indicator>
            <sc-status-indicator pulse type="danger"></sc-status-indicator>
            <sc-status-indicator type="info"></sc-status-indicator>
          </el-space>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never" header="趋势">
          <el-space wrap :size="15">
            <sc-trend v-model="trendValue" prefix="¥"></sc-trend>
            <sc-trend v-model="trendValue2"></sc-trend>
            <sc-trend v-model="trendValue3" suffix="%"></sc-trend>
          </el-space>

          <p style="margin-top: 15px; color: #999">设置reverse可反转颜色。</p>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <div class="up">
            <h2>持续更新中...</h2>
            <p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
            <p>原子组件库位置：@/components/scMini/*</p>
            <el-button type="primary" text @click="goIssue">提交想法</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: 'Minivab',
  data() {
    return {
      trendValue: 4.6,
      trendValue2: 0,
      trendValue3: -32
    }
  },
  mounted() {},
  methods: {
    goIssue() {
      window.open('https://github.com/scui-plus/scui/issues')
    }
  }
}
</script>

<style scoped>
.up {
  text-align: center;
}
.up h2 {
  margin-bottom: 10px;
}
.up p {
  color: #999;
  line-height: 1.5;
}
.el-card {
  height: 150px;
}
</style>
